<template>
    <div class="treeSty">

        <el-input
                prefix-icon="el-icon-search"
                size="small"
                placeholder="请输入部门名称进行搜索"
                v-model="filterText">
        </el-input>

        <el-tree
                :data="depts"
                :props="defaultProps"
                :filter-node-method="filterNode"
                :expand-on-click-node="false"
                ref="tree">
            <span class="custom-tree-node marginSty" slot-scope="{ node, data }">
                <!--data是当前节点的数据 department的json对象-->
                <span>{{ node.label }}</span>
                <span>
                  <el-button
                          type="primary"
                          size="mini"
                          class="deptBtn"
                          @click="() => showAddDepartmentView(data)">
                    添加部门
                  </el-button>
                  <el-button
                          type="danger"
                          size="mini"
                          class="deptBtn"
                          @click="() => deleteDepartment(data)">
                    删除部门
                  </el-button>
                </span>
              </span>
        </el-tree>

        <el-dialog
                title="添加部门"
                :visible.sync="dialogVisible"
                width="30%">
            <div>
                <table>
                    <tr>
                        <td><el-tag>上级部门</el-tag></td>
                        <td>{{parentDeptName}}</td>
                    </tr>
                    <tr>
                        <td><el-tag>部门名称</el-tag></td>
                        <td><el-input size="small" v-model="dept.name" placeholder="请输入部门名称...">
                        </el-input>
                        </td>
                    </tr>
                </table>
            </div>
            <span slot="footer" class="dialog-footer">
    <el-button @click="cancel">取 消</el-button>
    <el-button type="primary" @click="addDepartment">确 定</el-button>
  </span>
        </el-dialog>


    </div>
</template>

<script>
    export default {
        name: "deptManager",
        data(){
            return{
                dialogVisible:false,
                parentDeptName:'',
                dept:{
                    name:'',
                    parentId:-1
                },

                filterText:'',
                depts:[],
                defaultProps: {
                    children: 'children',
                    label: 'name'
                }
            }
        },
        watch: {
            // 监控搜索框中值的变化
            // 如有变化,则触发下方方法
            filterText(val) {
                // 使用它来触发 :filter-node-method="filterNode" 定义的方法
                // 也就是filterNode方法
                this.$refs.tree.filter(val);
            }
        },
        mounted() {
            this.getAllDept();
        },
        methods: {
            cancel(){
                this.initDept();
            },
            initDept(){
                this.dept={
                    name:'',
                    parentId:-1
                };
                this.parentDeptName='';
            },
            addDepartment(){
                this.postRequest("/system/basic/department/",this.dept).then(resp=>{
                    if(resp){
                        let department = resp.data;
                        this.dialogVisible=false;
                        this.initDept();
                        this.addTreeNode(department,this.depts);
                    }
                })
            },
            // 动态添加新增的部门
            addTreeNode(dept,depts){
                for (let i=0;i<depts.length;i++){
                    let deptsOne = depts[i];
                    if(dept.parentId==deptsOne.id){
                        deptsOne.children=deptsOne.children.concat(dept);
                        return;
                    }else {
                        this.addTreeNode(dept,deptsOne.children);
                    }
                }
            },
            filterNode(value, data) {
                if (!value) return true;
                return data.name.indexOf(value) !== -1;
            },
            getAllDept(){
                this.getRequest("/system/basic/department/").then(resp=>{
                    if(resp){
                        this.depts=resp.data
                    }
                })
            },
            showAddDepartmentView(dept){
                this.dept.parentId=dept.id;
                this.parentDeptName=dept.name;
                this.dialogVisible=true;
            },
            deleteDepartment(dept){
                // 部门下有员工 不可删除
                // 部门下有子部门 不可删除
                this.$confirm('此操作将永久删除['+dept.name+']部门, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteRequest("/system/basic/department/"+dept.id).then(resp=>{
                        if(resp){
                            this.removeDept(dept.id,this.depts);
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            removeDept(id,depts){
                for(let i=0;i<depts.length;i++){
                    let deptsOne = depts[i];
                    if(id==deptsOne.id){
                        depts.splice(i,1);
                        return;
                    }else {
                        this.removeDept(id,deptsOne.children);
                    }
                }
            }
        }
    }
</script>

<style >

    .treeSty{
        width: 500px;
    }
    .treeSty input{
        margin-bottom: 10px;
    }
    .deptBtn{
        padding: 2px;
    }
    .marginSty{
        display: flex;
        justify-content: space-between;
        width: 100%;
    }
</style>